<template>
<header class="Header" style="display: block;border-bottom: 1px solid #e4e7ed;padding: 0px;background-color: #f6f8fa" >
  <div class="Header-item" style="display: flex;padding: 25px;padding-bottom: 5px;margin-left: 60px" >
    <div style="margin-bottom: 6px;margin-right: 10px"> <el-icon size="18px"><Folder /></el-icon></div>
    <el-link style="font-size: 20px" @click="BackToRepo">
      {{ownerName}}
    </el-link>
    <div  style="font-size: 20px;margin-top: 5px;margin-right:5px ;margin-left: 5px">
      /
    </div>
    <div style="font-size: 22px;margin-top: 5px">
      {{repoName}}
    </div>
    <div v-if="isPrivate===true" style="border-radius: 2em;border: 1px solid grey;margin-left: 6px;padding: 1px 7px;font-size: 10px">Private</div>
    <div v-else style="border-radius: 2em;border: 1px solid grey;margin-left: 6px;padding:1px 7px;font-size: 10px" >Public</div>
  </div>
  <div class="Header-item" style=" display:flex; ;padding-top: 10px;padding-left: 20px;margin-bottom: -1.5px;margin-left:60px ;">
    <el-menu
        style="width: 350px;background-color: #f6f8fa"
        :default-active="0"
        class="el-menu-demo"
        mode="horizontal"
    >
      <el-menu-item @click="link('tree/master')" index="0">Code</el-menu-item>
      <el-menu-item @click="link('issues')" index="1">Issue</el-menu-item>
      <el-menu-item @click="link('pulls')" index="2">Pull Request</el-menu-item>
      <el-menu-item v-if="isManager" @click="link('manage')" index="3">Manage</el-menu-item>

    </el-menu>
    <div style="margin-left: 800px">
      <el-button v-if="count.isStar===false"  @click="star()">
        <div style="display: flex;align-items: center;margin-right: 5px">
          <el-icon><Star /></el-icon>
        </div>
        <div>
          Star
        </div>
        <div style=" padding-left: 5px;margin-left: 5px;border-left:1px solid #dcdfe6">
          {{ count.star }}
        </div>
      </el-button>
      <el-button type="primary" v-if="count.isStar===true"  @click="unStar()">
              <div style="display: flex;align-items: center;margin-right: 5px">
                <el-icon><Star /></el-icon>
              </div>
              <div>
                Star
              </div>
              <div style=" padding-left: 5px;margin-left: 5px;border-left:1px solid #dcdfe6">
                {{ count.star }}
              </div>
            </el-button>
      <el-button v-if="count.isFork===false" @click="fork()">
        <div style="display: flex;align-items: center;margin-right: 5px">
          <el-icon><TopRight /></el-icon>
        </div>
        <div>
          fork
        </div>
        <div style=" padding-left: 5px;margin-left: 5px;border-left:1px solid #dcdfe6">
          {{ count.fork }}
        </div>
      </el-button>
      <el-button v-if="count.isFork===true" disabled @click="fork()">
              <div style="display: flex;align-items: center;margin-right: 5px">
                <el-icon><TopRight /></el-icon>
              </div>
              <div>
                fork
              </div>
              <div style=" padding-left: 5px;margin-left: 5px;border-left:1px solid #dcdfe6">
                {{ count.fork }}
              </div>
            </el-button>
    </div>
  </div>

</header>
  <router-view/>
</template>


<script>
import "@/assets/css/github_cn.css";
import { Folder,ArrowLeft,ArrowRight,CollectionTag,Switch,Management,Star,TopRight } from '@element-plus/icons-vue';
import {ref} from "vue";
import request from "@/utils/request";
export default {
  name: "repoHomeView",
  components: {
    Folder,
    ArrowLeft,
    ArrowRight,
    CollectionTag,
    Switch,
    Management,
    Star,
    TopRight
  },
  updated(){

  },
  created(){
    this.userName=sessionStorage.getItem("userName");
    this.userId=sessionStorage.getItem("userId");
    this.repoName=this.$route.params.repoName;
    this.ownerName=this.$route.params.userName;

    request.post("/repo/info",  {"ownerId":this.ownerName, "repoName":this.repoName}).then(res => {
      console.log(res)
      this.repo=res.data
      this.isPrivate=res.data.isPrivate
      this.repoId=res.data.repoId
    })
    this.load()
  },
  data(){
    return{
      repoId:'',
      userName:'',
      userId:'',
      repoName:'',
      ownerName:'',
      isManager:false,
      isPrivate:false,
      repo:[],
      count:[],
    }
  },
  methods:{
    unStar(){
      request.post("repo/cancel_star",  {"repoName":this.repoName,"ownerName":this.ownerName,"userId":this.userId}).then(res => {
        console.log(res)
        this.load()
      })
    },
    star(){
     request.post("repo/star",  {"repoName":this.repoName,"ownerName":this.ownerName,"userId":this.userId}).then(res => {
            console.log(res)
       this.load()
     })
    },
    fork(){
      request.post("repo/fork",  {"userName":this.userName,"repoName":this.repoName,"ownerName":this.ownerName,"userId":this.userId}).then(res => {
            console.log(res)
        this.load()
      })
    },

    load(){
      this.isPrivate=this.repo.isPrivate;
      request.post("/manager/check",  {"repoName":this.repoName,"managerId":this.userId,"ownerName":this.ownerName}).then(res => {
        console.log(res)
        this.isManager=res.data
      })
      request.get(this.ownerName+"/"+this.repoName+"/count",
      {params:{
                userId: this.userId,
              }
              }).then(res => {
        console.log(res)
        this.count =res.data
        if(this.userName===this.ownerName){
          this.count.isFork=true
        }
      })

    },
    test(){
      console.log('!@#')
    },
    link(path){
      this.$router.push("/"+this.ownerName+"/"+this.repoName+"/"+path)
    },
    BackToRepo(){
      this.$router.push({
        path:'/'+sessionStorage.getItem("userName")
      })
    },
    handleClick(){
    }
  }
}
</script>

<style scoped>
</style>
